<!-- 搜索列表 -->
<template>
	<!-- scroll组件实现上拉刷新 @scrollToEnd="searchMore" -->
	<scroll ref="suggest" class="suggest" :data="result" :pullup="pullup" :beforeScroll="beforeScroll" @scrollToEnd="searchMore" @beforeScroll="listScroll">
		<ul class="suggest-list">
			<li @click="selectItem(item)" class="suggest-item" v-for="(item,index) in result" :key="index">
				<div class="icon">
					<i :class="getIconCls(item)"></i>
				</div>
				<div class="name">
					<p class="text" v-html="getDisplayName(item)"></p>
				</div>
			</li>
			<loading v-show="hasMore" title=""></loading>
		</ul>
		<div v-show="!hasMore && !result.length" class="no-result-wrapper">
			<no-result title="抱歉，暂无搜索结果"></no-result>
		</div>
	</scroll>
</template>

<script type="text/ecmascript-6">
import Scroll from "base/scroll/scroll";
import Loading from "base/loading/loading";
import NoResult from "base/no-result/no-result";
import { search } from "api/search";
import { ERR_OK } from "api/config";
import { createSong } from "common/js/song";
import { mapMutations, mapActions } from "vuex";
import Singer from "common/js/singer";

const TYPE_SINGER = "singer";
const perpage = 20;

export default {
    props: {
        showSinger: {
            type: Boolean,
            default: true
        },
        query: {
            type: String,
            default: ""
        }
    },
    data() {
        return {
            page: 1,
            pullup: true, // 上拉刷新
            beforeScroll: true,
            hasMore: true, // 是否加载完
            result: []
        };
    },
    methods: {
        refresh() {
            this.$refs.suggest.refresh();
        },
        search() {
            this.page = 1;
            this.hasMore = true;
            this.$refs.suggest.scrollTo(0, 0); // 把scroll的位置重置到顶部
            search(this.query, this.page, this.showSinger, perpage).then(
                res => {
                    if (res.code === ERR_OK) {
                        this.result = this._genResult(res.data);
                        this._checkMore(res.data);
                    }
                }
            );
        },
        // better-scroll拉到底部则触发上拉刷新
        searchMore() {
            if (!this.hasMore) {
                return;
            }
            this.page++;
            search(this.query, this.page, this.showSinger, perpage).then(
                res => {
                    if (res.code === ERR_OK) {
                        // 把以前的结果加上新搜索出的结果重新赋值给result
                        this.result = this.result.concat(
                            this._genResult(res.data)
                        );
                        this._checkMore(res.data);
                    }
                }
            );
        },
        // 检查有没有更多数据
        _checkMore(data) {
            const song = data.song;
            if (
                !song.list.length ||
                song.curnum + song.curpage * perpage > song.totalnum
            ) {
                this.hasMore = false;
            }
        },
        listScroll() {
            this.$emit("listScroll");
        },
        // 跳转到歌曲详情页面
        selectItem(item) {
            if (item.type === TYPE_SINGER) {
                // 跳转到歌手详情组件
                const singer = new Singer({
                    id: item.singermid,
                    name: item.singername
                });
                this.$router.push({
                    path: `/search/${singer.id}`
                });
                this.setSinger(singer); // vuex state中存入singer
            } else {
                // 跳转到歌曲详情组件
                this.insertSong(item);
            }
            // 告诉父组件点击的是什么，由父组件处理点击逻辑
            this.$emit("select", item);
        },
        getDisplayName(item) {
            if (item.type === TYPE_SINGER) {
                return item.singername;
            } else {
                return `${item.name}-${item.singer}`;
            }
        },
        getIconCls(item) {
            if (item.type === TYPE_SINGER) {
                return "icon-mine";
            } else {
                return "icon-music";
            }
        },
        _genResult(data) {
            let ret = [];
            if (data.zhida && data.zhida.singerid) {
                ret.push({ ...data.zhida, ...{ type: TYPE_SINGER } });
            }
            if (data.song) {
                ret = ret.concat(this._normalizeSongs(data.song.list));
            }
            return ret;
        },
        _normalizeSongs(list) {
            let ret = [];
            list.forEach(musicData => {
                if (musicData.songid && musicData.albummid) {
                    ret.push(createSong(musicData));
                }
            });
            return ret;
        },
        ...mapMutations({
            setSinger: "SET_SINGER"
        }),
        ...mapActions(["insertSong"])
    },
    watch: {
        // 监听搜索关键字的变化并触发搜索接口
        query(newQuery) {
            this.search(newQuery);
        }
    },
    components: {
        Scroll,
        Loading,
        NoResult
    }
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~common/stylus/variable'
@import '~common/stylus/mixin'
.suggest
	height 100%
	overflow hidden
	.suggest-list
		padding 0 30px
		.suggest-item
			display flex
			align-items center
			padding-bottom 20px
		.icon
			flex 0 0 30px
			width 30px
			[class^='icon-']
				font-size 14px
				color $color-text-d
		.name
			flex 1
			font-size $font-size-medium
			color $color-text-d
			overflow hidden
			.text
				no-wrap()
	.no-result-wrapper
		position absolute
		width 100%
		top 50%
		transform translateY(-50%)
</style>
